export default {
  data () {
    return {
      dustEchart: null,
      tspList: [],
      pmTenList: [],
      pmTwoPointFiveList: [],
      dustStageData: {
        dustData: {
          tsp: [{value: 10}, {value: 12}, {value: 11}, {value: 11}, {value: 9}, {value: 12}, {value: 10}],
          pmTen: [{value: 8}, {value: 10}, {value: 9}, {value: 9}, {value: 7}, {value: 10}, {value: 8}],
          pmTwoPointFive: [{value: 6}, {value: 7}, {value: 7}, {value: 5}, {value: 5}, {value: 8}, {value: 6}]
        }
      },
      dustOption: {
        tooltip: {
          trigger: 'axis',
          confine: true,
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          right: 0,
          itemWidth: 25,
          itemHeight: 2,
          padding: [7, 0, 0, 0],
          textStyle: {
            color: '#898989'
          },
          data: [{name: 'TSP', icon: 'rect'}, {name: 'PM10', icon: 'rect'}, {name: 'PM2.5', icon: 'rect'}]
        },
        grid: {
          left: 20,
          right: 20,
          bottom: 0,
          top: 80,
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: ['1日', '2日', '3日', '4日', '5日', '昨天', '今日'],
            axisLabel: {
              color: '#939393'
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#e8e8e8',
                width: 2
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: '#a8c5ed'
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: 'μg/m³',
            nameTextStyle: {
              color: '#939393'
            },
            axisLabel: {
              show: true,
              color: '#939393'
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#e8e8e8',
                width: 2
              }
            },
            splitLine: {
              lineStyle: {
                type: 'dashed',
                color: '#e8e8e8'
              }
            },
            position: 'right'
          }
        ],
        series: []
      }
    }
  },
  methods: {
    initDust () {
      if (this.dustEchart) {
        this.dustOption.series.forEach(item => {
          item.data = []
        })
      }
      if (this.deviceDustWorkSum.dust) {
        this.dustOption.xAxis[0].data = this.days
        this.tsp()
        this.pmTen()
        this.pmTwoPointFive()
      }
      this.dustEchart = this.$Echarts.init(this.$refs.dust)
      this.dustEchart.setOption(this.dustOption)
    },
    tsp () {
      let TSPData = []
      this.tspList.forEach((item) => {
        TSPData.push(item.value || 0)
      })
      let TSPSeries = {
        name: 'TSP',
        type: 'line',
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0, color: 'rgba(215, 244, 248, 0.9)' // 0% 处的颜色
            }, {
              offset: 1, color: 'rgba(215, 244, 248, 0.1)' // 100% 处的颜色
            }],
            globalCoord: false // 缺省为 false
          }
        },
        itemStyle: {
          color: '#33cadb',
          opacity: 0
        },
        data: TSPData
      }
      this.dustOption.series.push(TSPSeries)
    },
    pmTen () {
      let PMTenData = []
      this.pmTenList.forEach((item) => {
        PMTenData.push(item.value || 0)
      })
      let PMTenSeries = {
        name: 'PM10',
        type: 'line',
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0, color: 'rgba(183, 241, 229, 0.7)' // 0% 处的颜色
            }, {
              offset: 1, color: 'rgba(183, 241, 229, 0.1)' // 100% 处的颜色
            }],
            globalCoord: false // 缺省为 false
          }
        },
        itemStyle: {
          color: '#4bdaa4',
          opacity: 0
        },
        data: PMTenData
      }
      this.dustOption.series.push(PMTenSeries)
    },
    pmTwoPointFive () {
      let PMTwoPointFiveData = []
      this.pmTwoPointFiveList.forEach((item) => {
        PMTwoPointFiveData.push(item.value || 0)
      })
      let PMTwoPointFiveSeries = {
        name: 'PM2.5',
        type: 'line',
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0, color: 'rgba(200, 239, 244, 0.7)' // 0% 处的颜色
            }, {
              offset: 1, color: 'rgba(200, 239, 244, 0.1)' // 100% 处的颜色
            }],
            globalCoord: false // 缺省为 false
          }
        },
        itemStyle: {
          color: '#60bbf0',
          opacity: 0
        },
        data: PMTwoPointFiveData
      }
      this.dustOption.series.push(PMTwoPointFiveSeries)
    }
  }
}
